<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page">
        <el-form-item label="设备编号：">
          <el-input v-model="page.innerCode" class="elinput1" clearable placeholder="请输入" />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="type.name"
          label="设备编号"
        />
        <el-table-column
          prop="node.name"
          label="详细地址"
        />
        <el-table-column
          prop="zhuangtai"
          label="运营状态"
        />
        <el-table-column label="设备状态" width="280">
          <template #default="{row}">
            <el-button v-if="row.status['10001']=== true" type="info" round class="green" size="mini">离线</el-button>
            <el-button v-else-if="row.status['10001'] === false" type="success" round class="orange" size="mini">离线</el-button>
            <el-button v-if="row.status['10002']=== true" type="info" round class="green" size="mini">渠道</el-button>
            <el-button v-else-if="row.status['10002'] === false" type="success" round class="orange" size="mini">渠道</el-button>
            <el-button v-if="row.status['10003']=== true" type="info" round class="green" size="mini">传动轴</el-button>
            <el-button v-else-if="row.status['10003'] === false" type="success" round class="orange" size="mini">传动轴</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="detail(row)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      title="设备详情"
      :visible.sync="adddialog"
      width="35%"
    >
      <div>
        <div class="header">
          <div>销售量：<span class="span"> {{ max }} 个 </span></div>
          <div>销售额：<span class="span"> {{ money }} 万元 </span></div>
          <div>补货次数：<span class="span">{{ ment }} 次</span></div>
          <div>维修次数：<span class="span">{{ maintenance }} 次</span></div>
        </div>
        <div class="body">商品销量（月）</div>
        <div>
          <div v-if="productSales !== []" class="footer">
            <div v-for="(item,i) in productSales" :key="i" class="footerDiv"><div class="footerdiv1">{{ item.skuName }}</div><div class="footerdiv2">:  {{ item.count }} </div></div>
          </div>
          <div v-else class="footerTxt">当前设备未销售商品</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MachinesAPI, totalNumberOfOrders, moneyAPI, numberOfReplenishmentsAPI, maintenanceNumberAPI, productSalesAPI } from '@/api/deviceManagement'
export default {
  data() {
    return {
      page: {
        innerCode: null,
        pageIndex: 1,
        pageSize: 10
      },
      // 初始数据
      queryList: [],
      totalCount: null,
      adddialog: false,
      // 销售量
      max: null,
      // 收入
      money: null,
      // 补货次数
      ment: null,
      // 补货次数
      maintenance: null,
      // 商品销量
      productSales: []
    }
  },
  created() {
    this.getMachinesAPI()
  },
  methods: {
    inquire() {
      this.getMachinesAPI()
    },
    async getMachinesAPI() {
      const res = await MachinesAPI(this.page)
      this.queryList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      this.queryList.forEach(item => {
        if (item.vmStatus === 0) {
          item.zhuangtai = '未投放'
        } else if (item.vmStatus === 1) {
          item.zhuangtai = '运营'
        } else {
          item.zhuangtai = '撤机'
        }
      })
    },
    // 页码值
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getMachinesAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getMachinesAPI()
    },
    // 详情对话框
    async detail(row) {
      this.max = await totalNumberOfOrders(row.innerCode)
      this.money = (await moneyAPI(row.innerCode) / 1000000).toFixed(2)
      this.ment = await numberOfReplenishmentsAPI()
      this.maintenance = await maintenanceNumberAPI()
      this.productSales = await productSalesAPI(row.innerCode)
      console.log(this.money)
      console.log(this.productSales)
      this.adddialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.orange{
background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
}
.green{
background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
}
.header{
  display: flex;
  justify-content: space-evenly;
  height: 54px;
    background: rgba(227,233,245,.39);
    line-height: 54px;
  .span{
  color: #5f84ff;
  font-size: 12px;
}
}
.body{
  margin: 15px 0;
}
.footer{
  display:flex ;
  flex-wrap: wrap;
  .footerDiv{
    width: 25%;
    height: 35px;
    border: 0.3px #ccc solid;
    padding: 0px 8px;
    font-size: 12px;
    line-height: 35px;
    .footerdiv1{
      float: left;
    width: 60%;

    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .footerdiv2{
    float: right;
    width: 40%;
    height: 100%;
  }
  }
.footerTxt{
  text-align: center;
}
}
</style>
